<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2017/4/24
  Time: 9:42
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
    <div id="main">
        <div class="demo">
            <form id="form" action="get">

                <select name="year" id="year" class="select">
                    <c:forEach var="var" items="${years}">

                        <c:choose>
                            <c:when test="${var == year}"><option value="${var}" selected="selected">${var}</option></c:when>
                            <c:otherwise><option value="${var}">${var}</option></c:otherwise>
                        </c:choose>
                    </c:forEach>
                </select>

                <select name="month" class="month" >
                    <c:forEach var="var" items="${months}">
                        <option value="${var}">${var}</option>
                    </c:forEach>
                </select>
                <input type="submit" value="submit">
            </form>
        </div>
    </div>
    <div id="test" style="height:600px;"></div>

    <script type="text/javascript" src="res/jquery.js"></script>
    <script type="text/javascript" src="res/echarts.js"></script>
    <script>
        var xAxisDataJson = [];
        var currentDataJson = [];
        var lastDataJson = [];
        var diffDataJson = [];
        var increaseDataJson = [];
        var G = {
            xAxis:'${menus}',
            currentJSON:'${currentJSON}',
            lastJSON:'${lastJSON}',
            diffJSON:'${diffJSON}',
            increaseJSON:'${increaseJSON}'
        };
        var xAData = eval("("+G.xAxis+")");
        var currentData = eval("("+G.currentJSON+")");
        var lastData = eval("("+G.lastJSON+")");
        var diffData = eval("("+G.diffJSON+")");
        var increaseData = eval("("+G.increaseJSON+")");
        console.log(xAData.length);
        for(var i=0;i<xAData.length;i++){
            console.log(xAData[i]);
            xAxisDataJson[i] = xAData[i];
            currentDataJson[i] = currentData[i];
            lastDataJson[i] = lastData[i];
            diffDataJson[i] = diffData[i];
            increaseDataJson[i] = increaseData[i];
        }

        var barData = {
            xAxisData:function(){
                return xAxisDataJson;
            },
            currentData:function(){
                return currentDataJson;
            },
            lastData:function(){
                return lastDataJson;
            },
            diffData:function(){
                return diffDataJson;
            },
            increaseData:function(){
                return increaseDataJson;
            }
        };

        var myChart = echarts.init(document.getElementById('test'));
        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            toolbox: {
                feature: {
                    dataView: {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar']},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            legend: {
                data:['今年的总量','去年的总量','增量','增幅']
            },
            xAxis: [
                {
                    type: 'category',
                    data: barData.xAxisData()
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '总量',
                    min: -100,
                    max: 250,
                    interval: 50,
                    axisLabel: {
                        formatter: '{value} 万元'
                    }
                },
                {
                    type: 'value',
                    name: '增幅',
                    min: -100,
                    max: 100,
                    interval: 20,
                    axisLabel: {
                        formatter: '{value} %'
                    }
                }
            ],
            series: [
                {
                    name:'今年的总量',
                    type:'bar',
                    data:barData.currentData()
                },
                {
                    name:'去年的总量',
                    type:'bar',
                    data:barData.lastData()
                },
                {
                    name:'增量',
                    type:'bar',
                    data:barData.diffData()
                },
                {
                    name:'增幅',
                    type:'line',
                    yAxisIndex: 1,
                    data:barData.increaseData()
                }
            ]
        };


        myChart.setOption(option);
    </script>
</body>
</html>
